iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 28
0
自我挑戰組

2020 iT邦幫忙鐵人賽 網頁前端-刻意練習系列 第 28

Day28 網頁前端-刻意練習(模仿遊戲#1)

  • 分享至 

  • xImage
  •  

Day28 六角 模仿遊戲#1

https://ithelp.ithome.com.tw/upload/images/20200928/20129161agPH2xCchI.jpg
https://ithelp.ithome.com.tw/upload/images/20200928/2012916146qUnbmlz7.png

簡單小語

這個週末偷懶了一下,多花了點時間完成這個模仿遊戲,再次把最近學到的To Do List給放進來刻意練習一遍,JavaScript真的比HTML/CSS難上一階,既然先前沒有好好學習程式,現在就是別人更努力學習,花更多時間追上大家水平,這個版面一看到就覺得很多動畫效果是可以練習的,果然在JQuery那邊花了點時間釐清每一步動作需要執行的結果,使用開發者工具看點擊狀態真的很重要,不然一直憑空想像,根本不知道效果卡在哪裡,透過動態改變就可以知道是哪裡hen住了,開始全面改用.on(‘click’,function(){})製作效果,Keep Going。

筆記分享

  1. banner使用padding抓好距離並在不同尺寸呈現不同樣式。
  2. btn透過JQuery效果在hover後可以將放大鏡slideDown
  3. btn透過hover效果:after:hover後可以將透明灰背景出現。
  4. content放在li中根據不同尺寸定位在不同物件上。
  5. 使用:nth-child(n+5)選取到第五個以後的物件(一開始還想超久,真呆)。
  6. content透過z-index, opacity top的結合運用,讓點擊後出現slideDown及漸變效果。
  7. close則是老樣子定位完後透過box-shadow製造分身然後用transform:rotate()旋轉製作”X”。
  8. content在小尺寸中則是改變定位物件及呈現方式,透過transform:scale(0,1)在點擊後呈現放大效果出現。
  9. 因為在IPAD中不適合小尺寸樣式,因此斷點改為max-width=768px
  10. z-index的使用需了解每個物件的優先度,避免一開始To Do List無法cursor的囧境。

刻意練習

Practice(200824 Day 28)

樣板來源

Balkan Style — Portfolio Gallery


2020 iT邦幫忙鐵人賽 Day28 網頁前端-刻意練習(模仿遊戲#1)


上一篇
Day27 網頁前端-刻意練習(RWD#3)
下一篇
Day29 網頁前端-刻意練習(模仿遊戲#2)
系列文
2020 iT邦幫忙鐵人賽 網頁前端-刻意練習40
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言